<template>
  <div>
    <!-- 黑层 -->
    <div class="Permissiond" :style="{zIndex: zindex,backgroundColor:whitecolor,display:showd ? 'block':'none'}">
        <span :style="{ display:showd ? 'block':'none'}">🔒权限不足</span>
    </div>
    <div width="100%" class="sales-portal">
      <div
        style="border: 1px solid #eee; height: 760px; width: 850px"
        class="sales-portal-left"
      >
        <div style="width: 850px; height: 150px">
          <img
            src="../../assets/img/xiaoshouguanli.png"
            alt=""
            class="xiaoshouguanli"
          />
        </div>
        <div
          style="
            color: rgb(43, 106, 201);
            width: 850px;
            margin-top: 10px;
            margin-left: 10px;
            font-size: 20px;
          "
        >
          重点客户跟进
        </div>
        <div :data="clientData">
          <div
            style="
              width: 750px;
              height: 100px;
              box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
            "
            class="main-list"
            v-for="(item, index) in clientData"
            :key="index"
          >
            <div>
              <b>{{ item.companyName }}</b>
            </div>
            <div class="main-list-content" width="700px">
              <div style="width: 110px; margin-right: 10px; font-size: 14px">
                客户状态：{{ item.customerStatus }}
              </div>
              <div style="width: 260px; margin-right: 20px; font-size: 14px">
                地址：{{ item.address }}
              </div>
              <div
                style="
                  margin-left: 10px;
                  margin-right: 10px;
                  width: 100px;
                  font-size: 14px;
                "
              >
                联系记录<el-tag>{{ item.relationshipRecord }}</el-tag>
              </div>
              <div style="width: 100px; font-size: 14px">
                销售商机<el-tag type="danger">{{
                  item.salesOpportunity
                }}</el-tag>
              </div>
              <div style="margin-left: 10px; color: red; font-size: 20px">
                <b>{{ item.contactInformation }}</b>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="sales-portal-right" style="margin-left: 10px; height: 760px">
        <div>
          <div style="width: 400px; height: 150px">
            <img
              src="../../assets/img/xiaoshouright.png"
              alt=""
              class="xiaoshouright"
            />
          </div>
          <div class="sales-portal-right-center">
            <div class="center">
              <div>
                <img
                  src="../../assets/img/icon_xjll01.png"
                  alt=""
                  style="width: 30px; height: 30px"
                  class="icon1"
                />
              </div>
              <div class="center-title">
                <div style="color: rgb(43, 106, 201)">合同签约</div>
                <div>{{ priceAll }}万元</div>
                <div style="color: rgb(160, 165, 185); font-size: 12px">
                  本月签约总额
                </div>
              </div>
              <div class="center-bottom">
                <div>{{ numAll }}</div>
                <div style="color: rgb(160, 165, 185); font-size: 12px">
                  本月新增合同
                </div>
              </div>
            </div>
            <div class="center">
              <div>
                <img
                  src="../../assets/img/icon_xjll02.png"
                  alt=""
                  style="width: 30px; height: 30px"
                  class="icon2"
                />
              </div>
              <div class="center-title">
                <div style="color: rgb(43, 106, 201)">客户商机</div>
                <div>{{ clientQuantity }}</div>
                <div style="color: rgb(160, 165, 185); font-size: 12px">
                  本月新增客户
                </div>
              </div>
              <div class="center-bottom">
                <div>{{ businessQuantity }}</div>
                <div style="color: rgb(160, 165, 185); font-size: 12px">
                  本月新增商机
                </div>
              </div>
            </div>
            <div class="center">
              <div>
                <img
                  src="../../assets/img/icon_xjll03.png"
                  alt=""
                  style="width: 30px; height: 30px"
                  class="icon3"
                />
              </div>
              <div class="center-title">
                <div style="color: rgb(43, 106, 201)">三会情况</div>
                <div>48场</div>
                <div style="color: rgb(160, 165, 185); font-size: 12px">
                  本月三会情况
                </div>
              </div>
              <div class="center-bottom">
                <div>3</div>
                <div style="color: rgb(160, 165, 185); font-size: 12px">
                  本月客户投诉
                </div>
              </div>
            </div>
          </div>
          <div class="sales-portal-right-bottom" style="width: 400px">
            <div
              style="color: rgb(43, 106, 201); margin: 10px; margin-top: 30px"
            >
              常用功能
            </div>
            <div style="height: 280px" class="icon-list">
              <div>
                <img
                  src="../../assets/img/xiaoshou001.png"
                  alt=""
                  class="xiaoshou001"
                />
                <div @click="toolsClick1">我的客户</div>
              </div>
              <div>
                <img
                  src="../../assets/img/xiaoshou002.png"
                  alt=""
                  class="xiaoshou002"
                />
                <div @click="toolsClick2">查询客户</div>
              </div>
              <div>
                <img
                  src="../../assets/img/xiaoshou003.png"
                  alt=""
                  class="xiaoshou003"
                />
                <div @click="toolsClick3">客户联系</div>
              </div>
              <div>
                <img
                  src="../../assets/img/xiaoshou004.png"
                  alt=""
                  class="xiaoshou004"
                />
                <div @click="toolsClick4">商机查询</div>
              </div>
              <div>
                <img
                  src="../../assets/img/xiaoshou005.png"
                  alt=""
                  class="xiaoshou005"
                />
                <div @click="toolsClick5">合同查询</div>
              </div>
              <div>
                <img
                  src="../../assets/img/xiaoshou006.png"
                  alt=""
                  class="xiaoshou006"
                />
                <div>服务查询</div>
              </div>
              <div>
                <img
                  src="../../assets/img/xiaoshou007.png"
                  alt=""
                  class="xiaoshou007"
                />
                <div @click="toolsClick7">采购需求</div>
              </div>
              <div>
                <img
                  src="../../assets/img/xiaoshou008.png"
                  alt=""
                  class="xiaoshou008"
                />
                <div>统计报表</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="table-list">
      <div class="process">
        <el-breadcrumb separator="/" style="margin-left: 20px">
          <el-breadcrumb-item style="font-size: 18px"
            >流程待办</el-breadcrumb-item
          >
          <el-breadcrumb-item
            ><el-link :underline="false">合同审批</el-link></el-breadcrumb-item
          >
          <el-breadcrumb-item
            ><el-link :underline="false">销售支持</el-link></el-breadcrumb-item
          >
          <el-breadcrumb-item
            ><el-link :underline="false">报价审批</el-link></el-breadcrumb-item
          >
          <el-breadcrumb-item
            ><el-link :underline="false"></el-link
          ></el-breadcrumb-item>
        </el-breadcrumb>
        <div style="width: 850px; margin-left: 20px">
          <el-table :data="newContractList" style="width: 830px">
            <el-table-column prop="contractName" width="280"></el-table-column>
            <el-table-column prop="contractPrice" width="180"></el-table-column>
            <el-table-column
              prop="personInCharge"
              width="180"
            ></el-table-column>
            <el-table-column prop="founder"></el-table-column>
          </el-table>
        </div>
      </div>
      <div>
        <div
          style="margin-left: 10px; margin-top: 20px; color: rgb(43, 106, 201)"
        >
          排行榜
        </div>
        <!-- <div class="rank-list">
          <div v-for="item in rankList" :key="item.salespersonName">
            <img :src="'../../assets/img/s03-' + (item.ranking) + '.png'" alt="" class="s03-2" />
            <div>{{ item.salespersonName }}</div>
            <div>{{ item.totalContractPrice }}</div>
          </div>
        </div> -->
        <el-table :data="rankList" style="width: 400px; margin-top: 13px; padding-left: 20px;">
          <el-table-column prop="ranking" label="排名" width="100px">
          </el-table-column>
          <el-table-column
            prop="salespersonName"
            label="排行对象"
            width="134px"
          >
          </el-table-column>
          <el-table-column prop="totalContractPrice" label="排行数据">
          </el-table-column>
        </el-table>
      </div>
    </div>
    <div class="bottom-list">
      <div>
        <div
          style="
            color: rgb(43, 106, 201);
            margin-left: 10px;
            margin-top: 20px;
            font-size: 20px;
          "
        >
          销售合同列表
        </div>
        <div>
          <el-table :data="newContractList" style="width: 850px">
            <el-table-column prop="contractNumber" label="合同编号" width="130">
            </el-table-column>
            <el-table-column prop="contractName" label="合同名称" width="180">
            </el-table-column>
            <el-table-column prop="customerName" label="客户名称">
            </el-table-column>
            <el-table-column prop="contractPrice" label="合同金额">
            </el-table-column>
            <el-table-column prop="founder" label="签订日期"> </el-table-column>
            <el-table-column prop="personInCharge" label="客户经理">
            </el-table-column>
            <el-table-column prop="contractStatus" label="合同状态">
              <template slot-scope="scope">
                <el-tag
                  :type="
                    scope.row.contractStatus === '未激活'
                      ? 'warning'
                      : 'success'
                  "
                  >{{ scope.row.contractStatus }}</el-tag
                >
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
      <div class="document-center">
        <div>
          <el-breadcrumb separator="/">
            <el-breadcrumb-item style="font-size: 18px"
              >文档中心</el-breadcrumb-item
            >
            <el-breadcrumb-item
              ><el-link :underline="false"
                >解决方案</el-link
              ></el-breadcrumb-item
            >
            <el-breadcrumb-item
              ><el-link :underline="false">白皮书</el-link></el-breadcrumb-item
            >
            <el-breadcrumb-item
              ><el-link :underline="false">招标书</el-link></el-breadcrumb-item
            >
            <el-breadcrumb-item
              ><el-link :underline="false">报价单</el-link></el-breadcrumb-item
            >
            <el-breadcrumb-item
              ><el-link :underline="false"></el-link
            ></el-breadcrumb-item>
          </el-breadcrumb>
        </div>
        <div>
          <div>
            <el-table :data="documentList" stripe style="width: 100%">
              <el-table-column prop="fileName" width="180" label="文件名"> </el-table-column>
              <el-table-column prop="fileSize" width="130" label="文件大小"> </el-table-column>
              <el-table-column label="下载">
                <template slot-scope="scope">
                  <div class="el-icon-download" @click="download(scope.row)"></div>
                </template>

              </el-table-column>
            </el-table>
          </div>
          <el-upload
            class="upload-demo"
            :auto-upload="false"
            :on-change="handleChange"
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            :before-remove="beforeRemove"
            multiple
            :limit="3"
            :on-exceed="handleExceed"
            :file-list="fileList">
            <el-button size="small" type="primary">点击上传</el-button>
            <!-- <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div> -->
          </el-upload>
          <!-- <div class="upload-container" style="margin-top: 20px; margin-left: 10px" @mouseover="showHint = true" @mouseleave="showHint = false">
            <el-button type="primary" class="upload-btn" >上传
              <i class="el-icon-upload el-icon--right"></i>
            </el-button>
            <span class="upload-text" v-if="showHint">文件大小不能超过4GB</span>
          </div> -->
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  getKeyCustomers,
  selectContractAll,
  rankingList,
  getAllClientQuality,
  getAllBusinessQuantity,
  getCount,
} from "../../api/sales";
import {getFile} from '../../api/contract'
import { download,upload } from "../../utils/upload";
export default {
  mounted() {
    this.getKeyCustomers();
    this.selectContractAll();
    this.rankingList();
    this.getAllClientQuality();
    this.getAllBusinessQuantity();
    this.getCount();
    this.getFileName()
  },
  data() {
    return {
      zindex: "",
      showd:true,
      showHint: false,
      clientData: [],
      rankList: [],
      clientQuantity: "",
      businessQuantity: "",
      priceAll: "",
      numAll: "",
      contractList: [
        {
          number: "WSGP-XS2021080477",
          contract_name: "Ecology销售合同(演示数据)",
          client_name: "上海亘岩网络科技有限公司",
          contract_amount: "2000000.00",
          sign_date: "2021-08-20",
          contract_manager: "张帅扬/演示账号",
          // contract_status: "履约中",
        },
        {
          number: "WSGP-XS2022120735",
          contract_name: "Ecology销售合同",
          client_name: "上海亘岩网络科技有限公司",
          contract_amount: "490000.00",
          sign_date: "2021-08-18",
          contract_manager: "张帅扬",
          contract_status: "未激活",
        },
        {
          number: "WSGP-XS2024050828",
          contract_name: "Ecology销售合同",
          client_name: "上海亘岩网络科技有限公司",
          contract_amount: "2000000.00",
          sign_date: "2024-05-17",
          contract_manager: "张帅扬/演示账号",
          // contract_status: "未激活",
        },
        {
          number: "WSGP-XS2024050827",
          contract_name: "Ecology销售合同(二次购买)",
          client_name: "上海亘岩网络科技有限公司",
          contract_amount: "2000000.00",
          sign_date: "2021-05-17",
          contract_manager: "张帅扬/演示账号",
          // contract_status: "未激活",
        },
        {
          number: "WSGP-XS2024040826",
          contract_name: "Ecology销售合同",
          client_name: "上海亘岩网络科技有限公司",
          contract_amount: "100000.00",
          sign_date: "2023-07-01",
          contract_manager: "张帅扬/演示账号",
          // contract_status: "未激活",
        },
      ],
      newContractList: [],
      documentList: [],
    };
  },
  methods: {
    toolsClick1() {
      this.$router.push("/product/customer");
    },
    toolsClick2() {
      this.$router.push("/product/inquire");
    },
    toolsClick3() {
      this.$router.push("/product/contact");
    },
    toolsClick4() {
      this.$router.push("/product/leadManagement");
    },
    toolsClick5() {
      this.$router.push("/product/salesContract");
    },
    toolsClick7() {
      this.$router.push("/product/seal");
    },
    getKeyCustomers() {
      getKeyCustomers().then((res) => {
        if(res.code == 200){
          console.log(res);
           this.showd = !this.showd
           this.clientData = res.result;
        }else{
          this.zindex = '1000'
          // alert("没有权限")
          this.showd = this.showd

        }

      });
    },
    selectContractAll() {
      selectContractAll().then((res) => {
        console.log(res);
        this.contractList = res.result;
        for (let i = 0; i <= 6; i++) {
          this.newContractList.push(res.result[i]);
        }
      });
    },
    rankingList() {
      rankingList().then((res) => {
        console.log(res);
        this.rankList = res.result;
      });
    },
    getAllClientQuality() {
      getAllClientQuality().then((res) => {
        console.log(res);
        this.clientQuantity = res.result;
      });
    },
    getAllBusinessQuantity() {
      getAllBusinessQuantity().then((res) => {
        console.log(res);
        this.businessQuantity = res.result;
      });
    },
    getCount() {
      getCount().then((res) => {
        console.log(res);
        this.contractCount = res.result;
        this.priceAll = res.result.priceAll;
        this.numAll = res.result.numAll;
      });
    },
    //渲染文件名
    getFileName(){
      getFile().then(res => {
        console.log(res);
        this.documentList = res.result
      })
    },
    //下载
    download(row){

      download(row.fileName)
    },
    //上传文件
    handleChange(event){
      upload(event.raw).then(res => {
        this.getFileName()
        console.log(res)
      })
    }
  },
};
</script>

<style>
.Permissiond{
    position: fixed;
    width: 100%;
    height: 100%;
    color: rgb(234, 240, 246);
    padding-left: 35%;
    padding-top: 20%;
    font-size: 50px;
    background-color: white ;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}
.sales-portal {
  display: flex;
}
.main-list {
  margin: 0 auto;
  margin-top: 10px;
  margin-bottom: 20px;
  padding: 10px;
  border: 1px solid #eee;
  border-left-color: red;
  border-radius: 5px;
}
.main-list-content {
  margin-top: 5px;
  margin-bottom: 5px;
  display: flex;
  font-size: 14px;
}
.center {
  display: flex;
  justify-content: space-evenly;
  text-align: left;
  height: 100px;
}
.icon1,
.icon2,
.icon3 {
  margin-top: 40px;
}
.center-title {
  margin-top: 20px;
}
.center-bottom {
  margin-top: 44px;
}
.sales-portal-right-bottom {
  margin-top: 10px;
  height: 280px;
}
.icon-list {
  width: 400px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
  text-align: center;
}
.xiaoshou001,
.xiaoshou002,
.xiaoshou003,
.xiaoshou004,
.xiaoshou005,
.xiaoshou006,
.xiaoshou007,
.xiaoshou008 {
  width: 85px;
  height: 70px;
}
.process {
  margin-top: 20px;
}
.table-list {
  display: flex;
}
.bottom-list {
  display: flex;
}
.document-center {
  margin-top: 30px;
  margin-left: 5px;
  width: 400px;
}
.xiaoshouguanli {
  width: 850px;
  height: 150px;
}
.xiaoshouright {
  width: 400px;
  height: 150px;
}
.rank-list {
  margin-top: 26px;
  width: 400px;
  display: flex;
  justify-content: space-evenly;
}
.el-icon-download {
  font-size: 18px;
}
.upload-container {
  display: inline-block;
}
.upload-btn {
  cursor: pointer;
}
.upload-text {
  display: none;
  white-space: nowrap;
  background-color: #333;
  color: #fff;
  border-radius: 4px;
  padding: 5px;
  font-size: 12px;
  transition: opacity 0.3s;
  z-index: 10;
}
.upload-container:hover .upload-text {
  display: block;
}
</style>
